<template>
  <view class="code" :style="getStyle">
    <view class="code-icon" v-if="showMinus" @click="handleClickDelect">
      <m-icon name="mask-minus" :color="disabled ? '#d8e1e1' : '#f49428'" :size="40" />
    </view>
    <view class="code-img" @click="handlePreview" :key="modal.barcode" v-if="modal.barcode">
      <m-qrcode
        :options="{
          code: modal.barcode,
          size,
        }"
        ref="qrcode"
      />
      <m-icon class="code-img-text" name="eye" color="#fff" :size="42"> 预览 </m-icon>
    </view>
    <view class="code-right">
      <m-text size="30rpx" margin-right="20rpx">{{ modal.barcode }}</m-text>
      <view class="btn" v-if="statusTxt">
        <m-button size="sm" plain height="45rpx" :type="statusType">{{ statusTxt }}</m-button>
      </view>
    </view>
    <m-button size="sm" v-if="showRepair" @click="handleClickRepair">补打</m-button>
  </view>
</template>

<script>
import { showModal } from '@/hooks'
import { manualPrint } from '@/api/modules/in-work'

export default {
  props: {
    modal: {
      type: Object,
      default: () => {
        return {}
      },
    },
    showRepair: {
      type: Boolean,
      default: false,
    },
    showMinus: {
      type: Boolean,
      default: false,
    },
    statusType: {
      type: String,
      default: 'primary',
    },
    statusTxt: {
      type: String,
      default: '未打印',
    },
    broder: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: Number,
      default: 128,
    },
  },
  data() {
    return {}
  },
  computed: {
    getStyle() {
      return {
        border: '1px solid #f5f5f5',
        borderWidth: this.broder ? 1 : 0,
      }
    },
  },
  methods: {
    handleClickDelect() {
      this.$emit('del')
    },
    async handlePreview() {
      const res = await this.$refs.qrcode.saveImg(500, 500)
      uni.previewImage({
        urls: [res.tempFilePath],
      })
    },
    handleClickRepair() {
      showModal({
        title: '补打提示',
        content: '请问您确认要补打吗？',
        confirmText: '确认',
        showCancelButton: true,
        confirm: async () => {
          await manualPrint(this.modal.barcode)
          uni.showToast({
            title: '补打成功',
            icon: 'none',
          })
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  padding: 15rpx;
  margin-top: 25rpx;
  &-icon {
    width: 50rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
  }
  &-img {
    position: relative;
    overflow: hidden;
    border-radius: 8rpx;
    min-width: 80rpx;
    margin-right: 20rpx;
    &::after {
      display: block;
      content: ' ';
      position: absolute;
      bottom: 0;
      left: 0;
      top: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5);
    }
    &-text {
      position: absolute;
      width: 60rpx;
      text-align: center;
      height: 40rpx;
      line-height: 40rpx;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      color: #fff;
      font-size: 16rpx;
      border-radius: 8rpx;
      z-index: 9;
    }
  }
  &-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    .btn {
      margin-top: 18rpx;
    }
  }
  .text {
    word-break: break-all;
  }
}
</style>
